<!DOCTYPE html>
<html dir="ltr">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=2.0,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>!{root.lang.__('module_name')}</title>
	<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
	<link rel="stylesheet" href="/css/uikit/uikit.min.css">
	<link rel="stylesheet" href="/modules/cp/css/main.css">
	<link rel="stylesheet" href="/modules/parts/css/main.css">
	<script src="/js/admin.min.js"></script>
</head>

<body>
	<div class="uk-container uk-container-center uk-margin-top">
		<h1>!{root.lang.__('module_name')}</h1>
		<div class="uk-float-left uk-margin-bottom">
			<button class="uk-button uk-button-success uk-float-left" id="btn-add-item"><i class="uk-icon-plus"></i>
				<span class="uk-hidden-small">&nbsp;!{root.lang.__('add')}</span>
			</button>&nbsp;&nbsp;
			<div class="uk-button-group">
				<button class="uk-button" id="btn-select-all" data-uk-tooltip title="!{root.lang.__('select_all')}"><i class="uk-icon-square"></i>
				</button>
				<button class="uk-button" id="btn-select-none" data-uk-tooltip title="!{root.lang.__('select_none')}"><i class="uk-icon-square-o"></i>
				</button>
				<button class="uk-button uk-button-danger" id="btn-delete-selected"><i class="uk-icon-trash-o"></i>
					<span class="uk-hidden-small">&nbsp;!{root.lang.__('delete_selected')}</span>
				</button>
			</div>
		</div>
		<div class="uk-form uk-float-right">
			<div class="uk-form-icon"> <i class="uk-icon-search"></i>
				<input type="text" class="uk-form-width-medium" placeholder="!{root.lang.__('search_field')}" id="taracot_table_filter">
			</div>
		</div>
		<table class="uk-table uk-table-striped uk-table-hover taracot-data-table" id="taracot_table">
			<thead>
				<tr>
					<th class="taracot_table_sortable" rel="taracot_table_sortable_pname">!{root.lang.__('pname')}
						<span class="taracot-sort-marker">&nbsp;<i class="uk-icon-sort-asc"></i>
						</span>
					</th>
					<th style="width:102px;text-align:center" class="taracot_table_sortable" rel="taracot_table_sortable_lang">!{root.lang.__('lang')}</th>
					<th style="width:102px;text-align:center">!{root.lang.__('actions')}</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div class="taracot-loading uk-hidden uk-vertical-align uk-text-center">
			<div class="uk-vertical-align-middle">
				<img src="/modules/user/images/loading_36x36.gif" width="36" height="36" alt="">
			</div>
		</div>
		<div id="taracot_table_pagination"></div>
		<div id="taracot-modal-edit" class="uk-modal">
			<div class="uk-modal-dialog uk-modal-dialog-large">
				<div id="taracot-modal-edit-loading" class="uk-text-center">
					<img src="/modules/user/images/loading_36x36.gif" width="36" height="36" alt="">
				</div>
				<div id="taracot-modal-edit-loading-error" class="uk-alert uk-alert-danger">
					<a class="uk-modal-close uk-close"></a>!{root.lang.__('ajax_failed')}</div>
				<div id="taracot-modal-edit-wrap">
					<h1>
						<span id="taracot-modal-edit-h1-edit">!{root.lang.__('edit_option')}</span>
						<span id="taracot-modal-edit-h1-add" class="uk-hidden">!{root.lang.__('add')}</span>
					</h1>
					<form class="uk-form uk-form-stacked taracot-edit-form">
						<fieldset>
							<div class="uk-form-row">
								<label class="uk-form-label">!{root.lang.__('pname')}:</label>
								<input class="uk-width-1-1" type="text" id="pname">
							</div>
						</fieldset>
						<fieldset>
							<div class="uk-form-row">
								<label class="uk-form-label">!{root.lang.__('pvalue')}:</label>
								<textarea class="uk-width-1-1" id="pvalue"></textarea>
							</div>
						</fieldset>
						<fieldset>
							<div class="uk-form-row">
								<label class="uk-form-label">!{root.lang.__('lang')}:</label>
								<select id="plang" class="uk-form-width-medium">
								</select>
							</div>
						</fieldset>
					</form>
					<div class="taracot-buttons-area">
						<button class="uk-button" type="button" id="taracot-edit-btn-save">!{root.lang.__('save')}</button>&nbsp;
						<button class="uk-button uk-button-danger uk-modal-close" type="button">!{root.lang.__('cancel')}</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	var _lang_vars = {
		ajax_failed: "!{root.lang.__('ajax_failed')}",
		form_err_title: "!{root.lang.__('form_err_title')}",
		form_err_msg: "!{root.lang.__('form_err_msg')}",
		delete_err_msg: "!{root.lang.__('delete_err_msg')}",
		del_confirm: "!{root.lang.__('delete_confirm')}",
		save_success: "!{root.lang.__('save_success')}",
		no_res: "!{root.lang.__('no_results_in_table')}"
	};
	var locales = !{
		root.locales
	};
	for (var i = 0; i < locales.length; i++) {
		$('#plang').append('<option value="' + locales[i] + '">' + locales[i] + '</option>');
	}
	</script>
	<script src="/js/ckeditor/ckeditor.js"></script>
	<script src="/js/ckeditor/adapters/jquery.js"></script>
	<script src="/modules/parts/js/parts.min.js"></script>
</body>

</html>